<template>
  <div class="model-training-page">
    <!-- 通用导航栏 -->
    <CommonNavBar pageTitle="模型训练" />
    
    <!-- 动态电流背景 -->
    <div class="electric-background">
      <div class="electric-line horizontal" v-for="i in 8" :key="'h' + i" :style="{ top: (i * 12.5) + '%', animationDelay: (i * 0.2) + 's' }"></div>
      <div class="electric-line vertical" v-for="i in 12" :key="'v' + i" :style="{ left: (i * 8.33) + '%', animationDelay: (i * 0.15) + 's' }"></div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="page-content">
      <div class="module-container">
        <h2>智能双模型训练系统</h2>
        <p>手动触发LightGBM、XGBoost及智能集成模型训练</p>
        
        <!-- 训练参数配置 -->
        <div class="config-panel">
          <div class="config-grid-simplified">
            <!-- 训练数据范围配置 -->
            <div class="data-range-section">
              <h4>📊 训练数据范围</h4>
              <div class="range-options">
                <div class="range-option" 
                     v-for="range in dataRangeOptions" 
                     :key="range.value"
                     :class="{ active: trainingConfig.train_range === range.value }"
                     @click="selectDataRange(range.value)">
                  <div class="range-icon">{{ range.icon }}</div>
                  <div class="range-info">
                    <div class="range-label">{{ range.label }}</div>
                    <div class="range-desc">{{ range.description }}</div>
                    <div class="range-samples">约{{ range.samples }}个样本</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 集成模型配置 -->
            <div class="ensemble-config-section">
              <h4>⚙️ 智能集成配置</h4>
              <div class="ensemble-options">
                <div class="ensemble-option">
                  <div class="option-header">
                    <input v-model="trainingConfig.enable_parallel" 
                           type="checkbox" 
                           id="parallel-training" />
                    <label for="parallel-training">🚀 并行训练</label>
                  </div>
                  <div class="option-desc">同时训练LightGBM和XGBoost，提高训练效率</div>
                </div>
                
                <div class="ensemble-option">
                  <div class="option-header">
                    <input v-model="trainingConfig.enable_shap" 
                           type="checkbox" 
                           id="shap-analysis" />
                    <label for="shap-analysis">🔍 SHAP可解释性</label>
                  </div>
                  <div class="option-desc">生成特征重要性和模型可解释性分析报告</div>
                </div>
                
                <div class="ensemble-option">
                  <div class="option-header">
                    <input v-model="trainingConfig.dynamic_weights" 
                           type="checkbox" 
                           id="dynamic-weights" />
                    <label for="dynamic-weights">🎯 动态权重</label>
                  </div>
                  <div class="option-desc">根据模型性能自动调整集成权重，获得最佳预测效果</div>
                </div>
              </div>
              
              <div class="auto-params-notice">
                <div class="notice-icon">💡</div>
                <div class="notice-content">
                  <div class="notice-title">智能参数优化</div>
                  <div class="notice-text">LightGBM和XGBoost的所有参数将根据选择的数据范围自动优化，无需手动调整</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 模型状态面板 -->
        <div class="training-panel">
          <div class="model-status">
            <h3>模型状态监控</h3>
            <div class="status-grid">
              <div class="status-item" v-for="model in models" :key="model.key">
                <div class="model-header">
                  <div class="model-info">
                    <span class="model-name">{{ model.name }}</span>
                    <!-- <span class="model-performance">{{ model.performance }}</span> -->
                  </div>
                  <div class="model-actions">
                    <span class="status-badge" :class="getStatusClass(model.key)">
                      {{ getStatusText(model.key) }}
                    </span>
                    <!-- <button 
                      class="train-single-btn" 
                      @click="trainSingleModel(model.key)"
                      :disabled="isTraining"
                    >
                      <Icon type="ios-play" size="14" />
                      训练
                    </button> -->
                  </div>
                </div>
                <div class="model-details">
                  <p class="model-desc">{{ model.description }}</p>
                  <p class="model-best-for">
                    <span class="label">适用场景:</span>
                    <span class="value">{{ model.bestFor }}</span>
                  </p>
                </div>
                <div class="model-metrics" v-if="trainingMetrics[model.key]">
                  <div class="metric">
                    <span class="metric-label">MAE</span>
                    <span class="metric-value">{{ trainingMetrics[model.key].mae?.toFixed(4) || 'N/A' }}</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">RMSE</span>
                    <span class="metric-value">{{ trainingMetrics[model.key].rmse?.toFixed(4) || 'N/A' }}</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">R²</span>
                    <span class="metric-value">{{ trainingMetrics[model.key].r2?.toFixed(3) || 'N/A' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="training-controls">
            <h3>批量训练控制</h3>
            <div class="control-section">
              <div class="progress-info" v-if="isTraining">
                <div class="training-status">
                  <div class="status-indicator">
                    <Icon type="ios-loading" size="20" class="loading-icon" />
                    <span class="status-text">正在训练中...</span>
                  </div>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: trainingProgress + '%' }"></div>
                </div>
                <div class="progress-text">
                  <span>当前训练: {{ currentModel || '准备中...' }}</span>
                  <span>进度: {{ trainingProgress.toFixed(1) }}%</span>
                </div>
                <div class="progress-summary">
                  <span>成功训练: {{ completedModelsCount }}/{{ totalModelsCount }}</span>
                  <span v-if="currentModel">正在训练: {{ currentModel.toUpperCase() }}</span>
                </div>
                <div class="training-details" v-if="currentModel">
                  <div class="detail-item">
                    <span class="detail-label">训练状态:</span>
                    <span class="detail-value training">进行中</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">开始时间:</span>
                    <span class="detail-value">{{ getTrainingStartTime() }}</span>
                  </div>
                </div>
              </div>
              
              <div class="control-buttons">
                <button class="train-all-btn" @click="startAllTraining" :disabled="isTraining">
                  <Icon type="ios-flash" size="16" />
                  {{ isTraining ? '训练中...' : '开始全部训练' }}
                </button>
                <!-- <button class="stop-btn" @click="stopTraining" :disabled="!isTraining">
                  <Icon type="ios-pause" size="16" />
                  停止训练
                </button> -->
                <button class="refresh-btn" @click="refreshStatus">
                  <Icon type="ios-refresh" size="16" />
                  刷新状态
                </button>
                <!-- <button class="export-btn" @click="exportResults">
                  <Icon type="ios-download" size="16" />
                  导出结果
                </button> -->
              </div>
            </div>
          </div>
        </div>
        
        <!-- 训练可视化 -->
        <div class="visualization-panel" v-if="showVisualization">
          <h3>训练过程可视化</h3>
          <div class="charts-container">
            <div class="chart-item">
              <h4>模型性能对比</h4>
              <div ref="performanceChart" class="chart"></div>
            </div>
            <div class="chart-item">
              <h4>训练进度</h4>
              <div class="progress-container">
                <div class="model-progress-list">
                  <div v-for="model in models" :key="model.key" class="model-progress-item">
                    <div class="model-progress-info">
                      <span class="model-name">{{ model.name }}</span>
                      <span class="progress-status" :class="getModelProgressStatus(model.key)">
                        {{ getModelProgressText(model.key) }}
                      </span>
                    </div>
                    <div class="model-progress-bar">
                      <div class="progress-fill" :style="{ width: getModelProgress(model.key) + '%' }"></div>
                    </div>
                  </div>
                </div>
                <div class="overall-progress">
                  <div class="overall-progress-info">
                    <span>总体进度</span>
                    <span>{{ Math.round(overallProgress) }}%</span>
                  </div>
                  <div class="overall-progress-bar">
                    <div class="progress-fill" :style="{ width: overallProgress + '%' }"></div>
                  </div>
                  <div class="progress-summary">
                    <span>成功训练: {{ completedModelsCount }}/{{ totalModelsCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 训练日志 -->
        <div class="training-log">
          <h3>训练日志 <span class="log-count">({{ trainingLogs.length }})</span></h3>
          <div class="log-container">
            <div v-for="(log, index) in trainingLogs" :key="index" class="log-item" :class="log.type">
              <span class="log-time">{{ log.time }}</span>
              <span class="log-model" v-if="log.model">[{{ log.model.toUpperCase() }}]</span>
              <span class="log-message">{{ log.message }}</span>
            </div>
            <div v-if="trainingLogs.length === 0" class="log-empty">
              暂无训练日志
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonNavBar from '@/components/CommonNavBar'
import { predictionAPI } from '@/utils/api'
import * as echarts from 'echarts'

export default {
  name: 'ModelTrainingPage',
  components: {
    CommonNavBar
  },
  data() {
    return {
      // 简化的训练配置
      trainingConfig: {
        train_range: '2_years',   // 默认2年数据
        enable_parallel: true,
        enable_shap: true,
        dynamic_weights: true,
        models: ["lightgbm", "xgboost", "ensemble"]
      },
      
      // 数据范围选项
      dataRangeOptions: [
        {
          value: '1_year',
          label: '1年数据',
          description: '适合快速验证和小规模测试',
          samples: '365',
          icon: '📅'
        },
        {
          value: '2_years',
          label: '2年数据',
          description: '中期数据，平衡效果和资源',
          samples: '730',
          icon: '📊'
        },
        {
          value: '3_years',
          label: '3年数据',
          description: '充分捕获长期趋势和季节性模式',
          samples: '1095',
          icon: '📈'
        },
        {
          value: '8_years',
          label: '8年数据',
          description: '最大数据集，获得最佳模型性能',
          samples: '2920',
          icon: '🚀'
        }
      ],
      
      // 模型定义
      models: [
        {
          key: 'lightgbm',
          name: 'LightGBM',
          description: '轻量级梯度提升机，训练速度快，内存占用低，支持并行训练',
          performance: 'R²≈0.536',
          bestFor: '快速训练，高效预测，内存友好'
        },
        {
          key: 'xgboost',
          name: 'XGBoost',
          description: '极端梯度提升，鲁棒性强，特征工程友好，支持SHAP分析',
          performance: 'R²≈0.482',
          bestFor: '结构化数据，特征重要性分析，可解释性强'
        },
        {
          key: 'ensemble',
          name: '智能集成模型',
          description: '动态权重集成，结合LightGBM和XGBoost优势，提升预测稳定性',
          performance: '动态优化',
          bestFor: '最终生产部署，追求最佳性能和稳定性'
        }
      ],
      
      // 状态管理
      isTraining: false,
      currentModel: '',
      trainingProgress: 0,
      modelStatus: {},
      trainingMetrics: {},
      trainingHistory: {},
      trainingLogs: [],
      showVisualization: false,
      
      // 模型训练进度跟踪
      modelTrainingProgress: {
        lightgbm: 0,
        xgboost: 0,
        ensemble: 0
      },
      modelTrainingStatus: {
        lightgbm: 'pending',
        xgboost: 'pending', 
        ensemble: 'pending'
      },
      
      // 定时器
      statusTimer: null,
      progressTimer: null,
      
      // 图表实例
      performanceChart: null,
      
      // 训练开始时间
      trainingStartTime: null
    }
  },
  computed: {
    overallProgress() {
      const totalModels = this.models.length
      const completedModels = Object.values(this.modelTrainingStatus).filter(status => status === 'completed').length
      return (completedModels / totalModels) * 100
    },
    completedModelsCount() {
      return Object.values(this.modelTrainingStatus).filter(status => status === 'completed').length
    },
    totalModelsCount() {
      return this.models.length
    }
  },
  mounted() {
    this.initPage()
  },
  beforeDestroy() {
    this.clearTimers()
    
    // 清理日志流连接
    if (this.logEventSource) {
      this.logEventSource.close()
      this.logEventSource = null
    }
    
    // 清理图表实例
    if (this.performanceChart) {
      this.performanceChart.dispose()
      this.performanceChart = null
    }
  },
  methods: {
    async initPage() {
      console.log('模型训练页面加载完成')
      await this.refreshStatus()
      this.addLog('info', '页面初始化完成')
      
      // 初始化日志流连接
      // this.initLogStream() 
    },
    
    // initLogStream() {
    //   try {
    //     console.log('开始连接SSE日志流...')
        
    //     // 关闭之前的连接
    //     if (this.logEventSource) {
    //       this.logEventSource.close()
    //     }
        
    //     const eventSource = new EventSource('http://localhost:8000/api/v1/model/logs/stream')
        
    //     eventSource.onopen = (event) => {
    //       console.log('SSE连接已建立', event)
    //       this.addLog('info', 'SSE连接已建立')
    //     }
        
    //     eventSource.onmessage = (event) => {
    //       try {
    //         console.log('收到SSE消息:', event.data)
    //         const logData = JSON.parse(event.data)
            
    //         if (logData.type === 'heartbeat') {
    //           console.log('收到心跳包')
    //           return
    //         }
            
    //         // 添加后端日志到前端
    //         this.addLog(
    //           logData.level ? logData.level.toLowerCase() : 'info',
    //           logData.message || 'No message',
    //           logData.model
    //         )
            
    //         // 检查单个模型训练完成
    //         if (logData.model && logData.message && logData.message.includes('训练完成')) {
    //           this.modelTrainingStatus[logData.model] = 'completed'
    //           this.modelTrainingProgress[logData.model] = 100
    //           this.addLog('success', `${logData.model.toUpperCase()}模型训练完成`, logData.model)
    //         }
            
    //         // 如果收到训练完成消息，刷新状态并显示图表
    //         if (logData.message && logData.message.includes('所有模型训练完成')) {
    //           this.showVisualization = true
    //           // 立即设置所有模型为完成状态
    //           this.models.forEach(model => {
    //             this.modelTrainingStatus[model.key] = 'completed'
    //             this.modelTrainingProgress[model.key] = 100
    //           })
    //           setTimeout(() => {
    //             this.refreshStatus()
    //             // 一次性更新所有模型状态
    //             this.updateAllModelsCompletion()
    //           }, 1000)
    //         }
            
    //         // 检查训练开始消息，重置所有模型状态
    //         if (logData.message && logData.message.includes('开始训练所有模型')) {
    //           // 重置所有模型状态
    //           this.models.forEach(model => {
    //             this.modelTrainingStatus[model.key] = 'pending'
    //             this.modelTrainingProgress[model.key] = 0
    //           })
              
    //           // 开始训练时，显示训练中状态
    //           setTimeout(() => {
    //             this.models.forEach(model => {
    //               this.modelTrainingStatus[model.key] = 'training'
    //               this.modelTrainingProgress[model.key] = 0  // 训练中显示0%进度
    //             })
    //           }, 200)
    //         }
            
    //         // 强制更新Vue组件
    //         this.$forceUpdate()
            
    //       } catch (e) {
    //         console.warn('解析日志数据失败:', e, event.data)
    //         this.addLog('error', '解析日志数据失败: ' + e.message)
    //       }

    //     }
        
    //     eventSource.onerror = (error) => {
    //       console.error('日志流连接错误:', error)
    //       this.addLog('error', 'SSE连接错误，正在重连...')
          
    //       // 关闭当前连接
    //       if (eventSource.readyState === EventSource.CLOSED) {
    //         console.log('SSE连接已关闭，尝试重新连接...')
    //         // 延迟3秒后重试连接
    //         setTimeout(() => {
    //           this.initLogStream()
    //         }, 3000)
    //       }
    //     }
        
    //     // 保存连接引用以便清理
    //     this.logEventSource = eventSource
        
    //   } catch (error) {
    //     console.error('初始化日志流失败:', error)
    //     this.addLog('error', '初始化日志流失败: ' + error.message)
    //   }
    // },
    
    selectDataRange(rangeValue) {
      this.trainingConfig.train_range = rangeValue
      this.addLog('info', `已选择数据范围: ${this.getDataRangeLabel(rangeValue)}`)
    },
    
    getDataRangeLabel(value) {
      const option = this.dataRangeOptions.find(opt => opt.value === value)
      return option ? option.label : value
    },
    
    async refreshStatus() {
      try {
        const response = await predictionAPI.getModelStatus()
        if (response.success) {
          const modelStatus = response.model_status
          const history = response.training_history || {}
          
          // 修复：正确处理后端返回的模型状态数据
          if (modelStatus) {
            // 更新各个模型的状态
            Object.keys(modelStatus).forEach(modelKey => {
              const status = modelStatus[modelKey]
              if (status && typeof status === 'object') {
                // 更新模型训练状态
                this.modelStatus[modelKey] = status.is_trained || false
                
                // 如果模型已训练，设置为完成状态
                if (status.is_trained) {
                  this.modelTrainingStatus[modelKey] = 'completed'
                  this.modelTrainingProgress[modelKey] = 100
                }
                
                // 更新训练指标
                if (status.metrics) {
                  this.trainingMetrics[modelKey] = status.metrics
                }
              }
            })
          }
          
          // 兼容旧版本API结构
          const status = response.model_status
          this.isTraining = status.is_training || false
          this.currentModel = status.current_model || ''
          this.trainingProgress = status.progress || 0
          this.trainingHistory = history || {}
          
          // 更新训练指标（兼容旧版本）
          if (status.metrics) {
            this.trainingMetrics = { ...this.trainingMetrics, ...status.metrics }
          }
          
          // 检查是否有新完成的模型
          if (status.completed_models && status.completed_models.length > 0) {
            status.completed_models.forEach(model => {
              if (!this.modelStatus[model]) {
                this.addLog('success', `${model.toUpperCase()}模型训练完成`, model)
                this.modelStatus[model] = true
                // 设置模型为完成状态，进度为100%
                this.modelTrainingStatus[model] = 'completed'
                this.modelTrainingProgress[model] = 100
              }
            })
          }
          
          // 训练完成时停止监控
          if (!this.isTraining && this.trainingProgress >= 100) {
            this.clearTimers()
            this.addLog('success', '所有模型训练完成!')
            this.showVisualization = true
            
            // 确保所有模型都设置为完成状态
            this.models.forEach(model => {
              this.modelTrainingStatus[model.key] = 'completed'
              this.modelTrainingProgress[model.key] = 100
            })
            
            await this.refreshStatus()
            
            // 等待DOM更新后初始化图表
            this.$nextTick(() => {
              this.initCharts()
              this.updatePerformanceChart()
            })
          }
        }
      } catch (error) {
        console.error('获取模型状态失败:', error)
        this.addLog('error', '状态刷新失败: ' + error.message)
      }
    },
    
    async startAllTraining() {
      if (this.isTraining) return
      
      try {
        this.addLog('info', '开始启动全部模型训练...')
        
        // 设置训练开始时间
        this.trainingStartTime = new Date()
        
        // 重置训练进度
        this.modelTrainingProgress = {
          lightgbm: 0,
          xgboost: 0,
          ensemble: 0
        }
        this.modelTrainingStatus = {
          lightgbm: 'pending',
          xgboost: 'pending', 
          ensemble: 'pending'
        }
        
        const response = await predictionAPI.startEnhancedTraining(this.trainingConfig)
        
        if (response.success) {
          this.isTraining = true
          this.trainingProgress = 0
          this.addLog('success', '全部模型训练任务已启动')
          
          // 开始监控训练进度
          this.startProgressMonitoring()
        } else {
          this.addLog('error', '启动训练失败: ' + response.message)
        }
      } catch (error) {
        console.error('启动训练失败:', error)
        this.addLog('error', '启动训练失败: ' + error.message)
      }
    },
    
    async trainSingleModel(modelName) {
      if (this.isTraining) return
      
      try {
        this.addLog('info', `开始训练${modelName.toUpperCase()}模型...`, modelName)
        
        const response = await predictionAPI.post(`/model/models/${modelName}/train`, this.trainingConfig)
        
        if (response.data.success) {
          this.isTraining = true
          this.currentModel = modelName
          this.trainingProgress = 0
          this.addLog('success', `${modelName.toUpperCase()}模型训练已启动`, modelName)
          
          // 开始监控训练进度
          this.startProgressMonitoring()
        } else {
          this.addLog('error', `启动${modelName}训练失败: ` + response.data.message, modelName)
        }
      } catch (error) {
        console.error(`启动${modelName}训练失败:`, error)
        this.addLog('error', `启动${modelName}训练失败: ` + error.message, modelName)
      }
    },
    
    async stopTraining() {
      try {
        const response = await predictionAPI.post('/model/stop')
        if (response.data.success) {
          this.isTraining = false
          this.currentModel = ''
          this.trainingProgress = 0
          this.clearTimers()
          this.addLog('warning', '训练已停止')
        }
      } catch (error) {
        console.error('停止训练失败:', error)
        this.addLog('error', '停止训练失败: ' + error.message)
      }
    },
    
    async exportResults() {
      try {
        const exportData = {
          timestamp: new Date().toISOString(),
          config: this.trainingConfig,
          metrics: this.trainingMetrics,
          models: this.models.map(m => m.key)
        }
        
        const response = await predictionAPI.post('/model/export', exportData)
        
        if (response.data.success) {
          this.addLog('success', '训练结果导出成功')
          
          // 自动下载文件
          const downloadUrl = response.data.data.download_url
          if (downloadUrl) {
            const link = document.createElement('a')
            link.href = '/api/v1' + downloadUrl
            link.download = downloadUrl.split('/').pop()
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.addLog('success', '文件下载已开始')
          }
        }
      } catch (error) {
        console.error('导出结果失败:', error)
        this.addLog('error', '导出结果失败: ' + error.message)
      }
    },
    
    startProgressMonitoring() {
      this.clearTimers()
      
      // 每2秒检查一次训练状态
      this.statusTimer = setInterval(async () => {
        try {
          const response = await predictionAPI.getModelStatus()
          if (response.success) {
            const modelStatus = response.model_status
            const history = response.training_history || {}
            
            // 修复：正确处理后端返回的模型状态数据
            if (modelStatus) {
              // 更新各个模型的状态
              Object.keys(modelStatus).forEach(modelKey => {
                const status = modelStatus[modelKey]
                if (status && typeof status === 'object') {
                  // 更新模型训练状态
                  this.modelStatus[modelKey] = status.is_trained || false
                  
                  // 如果模型已训练，设置为完成状态
                  if (status.is_trained) {
                    this.modelTrainingStatus[modelKey] = 'completed'
                    this.modelTrainingProgress[modelKey] = 100
                  }
                  
                  // 更新训练指标
                  if (status.metrics) {
                    this.trainingMetrics[modelKey] = status.metrics
                  }
                }
              })
            }
            
            // 兼容旧版本API结构
            const status = response.model_status
            this.isTraining = status.is_training || false
            this.currentModel = status.current_model || ''
            this.trainingProgress = status.progress || 0
            this.trainingHistory = history || {}
            
            // 更新训练指标（兼容旧版本）
            if (status.metrics) {
              this.trainingMetrics = { ...this.trainingMetrics, ...status.metrics }
            }
            
            // 检查是否有新完成的模型
            if (status.completed_models && status.completed_models.length > 0) {
              status.completed_models.forEach(model => {
                if (!this.modelStatus[model]) {
                  this.addLog('success', `${model.toUpperCase()}模型训练完成`, model)
                  this.modelStatus[model] = true
                  // 设置模型为完成状态，进度为100%
                  this.modelTrainingStatus[model] = 'completed'
                  this.modelTrainingProgress[model] = 100
                }
              })
            }
            
            // 训练完成时停止监控
            if (!this.isTraining && this.trainingProgress >= 100) {
              this.clearTimers()
              this.addLog('success', '所有模型训练完成!')
              this.showVisualization = true
              
              // 确保所有模型都设置为完成状态
              this.models.forEach(model => {
                this.modelTrainingStatus[model.key] = 'completed'
                this.modelTrainingProgress[model.key] = 100
              })
              
              // 等待DOM更新后初始化图表
              this.$nextTick(() => {
                this.initCharts()
                this.updatePerformanceChart()
              })
            }
          }
        } catch (error) {
          console.error('监控训练状态失败:', error)
        }
      }, 2000)
    },
    
    clearTimers() {
      if (this.statusTimer) {
        clearInterval(this.statusTimer)
        this.statusTimer = null
      }
      if (this.progressTimer) {
        clearInterval(this.progressTimer)
        this.progressTimer = null
      }
    },
    
    getStatusClass(modelKey) {
      if (this.isTraining && this.currentModel === modelKey) {
        return 'training'
      }
      return { 'trained': this.modelStatus[modelKey] }
    },
    
    getStatusText(modelKey) {
      if (this.isTraining && this.currentModel === modelKey) {
        return '训练中'
      }
      return this.modelStatus[modelKey] ? '已训练' : '未训练'
    },
    
    getModelProgress(modelKey) {
      // 只显示训练完成状态，其他状态显示0%
      if (this.modelTrainingStatus[modelKey] === 'completed') {
        return 100
      }
      return 0
    },
    
    getModelProgressStatus(modelKey) {
      const status = this.modelTrainingStatus[modelKey]
      return {
        'pending': status === 'pending',
        'training': status === 'training', 
        'completed': status === 'completed'
      }
    },
    
    getModelProgressText(modelKey) {
      const status = this.modelTrainingStatus[modelKey]
      switch(status) {
        case 'pending': return '等待中'
        case 'training': return '训练中'
        case 'completed': return '已完成'
        default: return '未训练'
      }
    },
    
    updateAllModelsCompletion() {
      console.log('一次性更新所有模型完成状态')
      // 将所有模型状态设置为已完成，进度为100%
      this.models.forEach(model => {
        this.modelTrainingProgress[model.key] = 100
        this.modelTrainingStatus[model.key] = 'completed'
      })
      
      // 刷新整体状态
      this.$forceUpdate()
    },
    
    addLog(type, message, model = null) {
      const time = new Date().toLocaleTimeString()
      this.trainingLogs.unshift({
        type,
        time,
        message,
        model
      })
      
      // 保持日志数量在合理范围内
      if (this.trainingLogs.length > 100) {
        this.trainingLogs = this.trainingLogs.slice(0, 100)
      }
    },
    
    getTrainingStartTime() {
      if (!this.trainingStartTime) {
        return '未开始'
      }
      return this.trainingStartTime.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    initCharts() {
      // 确保DOM元素存在
      if (!this.$refs.performanceChart) {
        console.warn('performanceChart DOM element not found')
        return
      }
      
      // 销毁现有图表实例
      if (this.performanceChart) {
        this.performanceChart.dispose()
        this.performanceChart = null
      }
      
      // 初始化性能对比图表
      this.performanceChart = echarts.init(this.$refs.performanceChart)
      
      // 设置性能对比图表配置
      const performanceOption = {
        title: {
          text: '模型性能对比',
          textStyle: { color: '#75deef' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['MAE', 'RMSE', 'R²'],
          textStyle: { color: '#999' }
        },
        xAxis: {
          type: 'category',
          data: ['LightGBM', 'XGBoost', 'MLP', 'Ensemble'],
          axisLabel: { color: '#999' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#999' }
        },
        backgroundColor: 'transparent',
        series: [
          {
            name: 'MAE',
            type: 'bar',
            data: [0, 0, 0, 0],
            itemStyle: { color: '#75deef' }
          },
          {
            name: 'RMSE',
            type: 'bar',
            data: [0, 0, 0, 0],
            itemStyle: { color: '#4ecdc4' }
          },
          {
            name: 'R²',
            type: 'bar',
            data: [0, 0, 0, 0],
            itemStyle: { color: '#ff6b6b' }
          }
        ]
      }
      
      this.performanceChart.setOption(performanceOption)
    },
    
    updatePerformanceChart() {
      if (!this.performanceChart || !this.trainingMetrics) return
      
      const models = ['lightgbm', 'xgboost', 'mlp', 'ensemble']
      const maeData = []
      const rmseData = []
      const r2Data = []
      
      models.forEach(model => {
        const metrics = this.trainingMetrics[model]
        if (metrics) {
          maeData.push(metrics.mae || 0)
          rmseData.push(metrics.rmse || 0)
          r2Data.push(metrics.r2 || 0)
        } else {
          maeData.push(0)
          rmseData.push(0)
          r2Data.push(0)
        }
      })
      
      this.performanceChart.setOption({
        series: [
          { name: 'MAE', data: maeData },
          { name: 'RMSE', data: rmseData },
          { name: 'R²', data: r2Data }
        ]
      })
    },
    
    updateProgressChart() {
      if (!this.progressChart) return
      
      const times = []
      const progress = []
      
      // 从训练历史中获取进度数据
      if (this.trainingHistory && this.trainingHistory.progress) {
        this.trainingHistory.progress.forEach(item => {
          times.push(new Date(item.timestamp).toLocaleTimeString())
          progress.push(item.progress)
        })
      }
      
      this.progressChart.setOption({
        xAxis: { data: times },
        series: [{ name: '训练进度', data: progress }]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.model-training-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #0f1b2a 100%);
  padding: 20px;
  padding-top: 100px;
  box-sizing: border-box;
  position: relative;
  
  // 动态电流背景
  .electric-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 1;
    
    .electric-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
      box-shadow: 0 0 10px #ff6b6b;
      
      &.horizontal {
        width: 100%;
        height: 2px;
        animation: electricFlowH 3s ease-in-out infinite;
      }
      
      &.vertical {
        width: 2px;
        height: 100%;
        animation: electricFlowV 4s ease-in-out infinite;
      }
    }
  }
  
  .page-content {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    
    .module-container {
      width: 100%;
      background: rgba(7, 19, 50, 0.6);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 30px;
      position: relative;
      backdrop-filter: blur(10px);
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ff6b6b, #ff8a80);
        border-radius: 12px 12px 0 0;
      }
      
      h2 {
        color: #75deef;
        font-size: 24px;
        margin-bottom: 10px;
      }
      
      p {
        color: #999;
        font-size: 16px;
        margin-bottom: 30px;
      }
      
      // 参数配置面板
      .config-panel {
        background: rgba(7, 19, 50, 0.4);
        border: 1px solid #1a3c58;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        
        
        h3 {
          color: #75deef;
          font-size: 18px;
          margin-bottom: 15px;
        }
        
        .config-grid-simplified {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 30px;
          
          .data-range-section {
            background: rgba(7, 19, 50, 0.4);
            border: 1px solid #1a3c58;
            border-radius: 12px;
            padding: 25px;
            
            h4 {
              margin: 0 0 20px 0;
              color: #75deef;
              font-size: 18px;
              font-weight: 600;
              display: flex;
              align-items: center;
              gap: 8px;
            }
            
            .range-options {
              display: grid;
              gap: 15px;
              
              .range-option {
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 15px;
                background: rgba(7, 19, 50, 0.3);
                border: 2px solid transparent;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.3s ease;
                
                &:hover {
                  background: rgba(117, 222, 239, 0.1);
                  border-color: rgba(117, 222, 239, 0.3);
                }
                
                &.active {
                  background: rgba(117, 222, 239, 0.2);
                  border-color: #75deef;
                  box-shadow: 0 0 20px rgba(117, 222, 239, 0.3);
                }
                
                .range-icon {
                  font-size: 24px;
                  min-width: 40px;
                  text-align: center;
                }
                
                .range-info {
                  flex: 1;
                  
                  .range-label {
                    color: #75deef;
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 4px;
                  }
                  
                  .range-desc {
                    color: #ccc;
                    font-size: 14px;
                    margin-bottom: 4px;
                    line-height: 1.3;
                  }
                  
                  .range-samples {
                    color: #4ecdc4;
                    font-size: 12px;
                    font-weight: bold;
                  }
                }
              }
            }
          }
          
          .ensemble-config-section {
            background: rgba(7, 19, 50, 0.4);
            border: 1px solid #1a3c58;
            border-radius: 12px;
            padding: 25px;
            
            h4 {
              margin: 0 0 20px 0;
              color: #75deef;
              font-size: 18px;
              font-weight: 600;
              display: flex;
              align-items: center;
              gap: 8px;
            }
            
            .ensemble-options {
              margin-bottom: 20px;
              
              .ensemble-option {
                background: rgba(7, 19, 50, 0.3);
                border: 1px solid #1a3c58;
                border-radius: 8px;
                padding: 15px;
                margin-bottom: 12px;
                transition: all 0.3s ease;
                
                &:hover {
                  background: rgba(78, 205, 196, 0.1);
                  border-color: rgba(78, 205, 196, 0.3);
                }
                
                .option-header {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  margin-bottom: 8px;
                  
                  input[type="checkbox"] {
                    width: 20px;
                    height: 20px;
                    accent-color: #4ecdc4;
                  }
                  
                  label {
                    color: #75deef;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    user-select: none;
                  }
                }
                
                .option-desc {
                  color: #ccc;
                  font-size: 14px;
                  line-height: 1.4;
                  margin-left: 32px;
                }
              }
            }
            
            .auto-params-notice {
              display: flex;
              align-items: flex-start;
              gap: 12px;
              padding: 15px;
              background: rgba(255, 193, 7, 0.1);
              border: 1px solid rgba(255, 193, 7, 0.3);
              border-radius: 8px;
              
              .notice-icon {
                font-size: 20px;
                min-width: 24px;
              }
              
              .notice-content {
                flex: 1;
                
                .notice-title {
                  color: #ffc107;
                  font-size: 14px;
                  font-weight: bold;
                  margin-bottom: 4px;
                }
                
                .notice-text {
                  color: #e0a800;
                  font-size: 13px;
                  line-height: 1.4;
                }
              }
            }
          }
          
                      .config-item {
              display: flex;
              flex-direction: column;
              
              label {
                color: #75deef;
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
              }
              
              // 集成模型参数的紧凑样式
              &.ensemble-item {
                flex-direction: row;
                align-items: center;
                gap: 8px;
                margin-bottom: 8px;
                
                label {
                  margin-bottom: 0;
                  font-size: 13px;
                  flex: 1;
                }
                
                input[type="checkbox"] {
                  margin: 0;
                  width: auto;
                }
                
                .param-desc {
                  font-size: 11px;
                  margin-top: 2px;
                  margin-left: 20px;
                }
              }
            
            input, .range-select {
              padding: 10px 12px;
              background: rgba(7, 19, 50, 0.4);
              border: 1px solid #1a3c58;
              border-radius: 4px;
              color: #fff;
              font-size: 14px;
              margin-bottom: 4px;
              
              &:focus {
                outline: none;
                border-color: #75deef;
                box-shadow: 0 0 0 2px rgba(117, 222, 239, 0.2);
              }
            }
            
            .range-select {
              cursor: pointer;
              
              option {
                background: #0b1426;
                color: #fff;
                padding: 8px;
              }
            }
            
            .param-desc {
              color: #999;
              font-size: 12px;
              font-style: italic;
              line-height: 1.3;
            }
          }
        }
      }
      
      // 训练面板
      .training-panel {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
        
        .model-status {
          background: rgba(7, 19, 50, 0.4);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          padding: 20px;
          height: 380px; /* 固定高度 */
          overflow-y: auto; /* 添加滚动 */
          
          h3 {
            color: #75deef;
            font-size: 18px;
            margin-bottom: 15px;
          }
          
          .status-grid {
            display: grid;
            gap: 15px;
            
            .status-item {
              background: rgba(7, 19, 50, 0.3);
              border: 1px solid #1a3c58;
              border-radius: 8px;
              padding: 18px;
              
              .model-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 12px;
                
                .model-info {
                  display: flex;
                  flex-direction: column;
                  
                  .model-name {
                    color: #75deef;
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 4px;
                  }
                  
                  .model-performance {
                    color: #4ecdc4;
                    font-size: 14px;
                    font-weight: bold;
                    background: rgba(78, 205, 196, 0.1);
                    padding: 2px 8px;
                    border-radius: 12px;
                    width: fit-content;
                  }
                }
                
                .model-actions {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-end;
                  gap: 8px;
                  
                  .status-badge {
                    padding: 4px 8px;
                    border-radius: 12px;
                    font-size: 12px;
                    font-weight: bold;
                    background: rgba(255, 107, 107, 0.2);
                    color: #ff6b6b;
                    border: 1px solid #ff6b6b;
                    
                    &.trained {
                      background: rgba(78, 205, 196, 0.2);
                      color: #4ecdc4;
                      border-color: #4ecdc4;
                    }
                    
                    &.training {
                      background: rgba(255, 193, 7, 0.2);
                      color: #ffc107;
                      border-color: #ffc107;
                      animation: pulse 1.5s infinite;
                    }
                  }
                  
                  .train-single-btn {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    padding: 6px 12px;
                    background: rgba(117, 222, 239, 0.2);
                    color: #75deef;
                    border: 1px solid #75deef;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 12px;
                    transition: all 0.3s ease;
                    
                    &:hover:not(:disabled) {
                      background: rgba(117, 222, 239, 0.3);
                    }
                    
                    &:disabled {
                      opacity: 0.6;
                      cursor: not-allowed;
                    }
                  }
                }
              }
              
              .model-details {
                margin-bottom: 15px;
                
                .model-desc {
                  color: #ccc;
                  font-size: 14px;
                  margin-bottom: 8px;
                  line-height: 1.4;
                }
                
                .model-best-for {
                  color: #999;
                  font-size: 13px;
                  margin: 0;
                  
                  .label {
                    color: #75deef;
                    font-weight: bold;
                    margin-right: 6px;
                  }
                  
                  .value {
                    color: #4ecdc4;
                    font-style: italic;
                  }
                }
              }
              
              .model-metrics {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                
                .metric {
                  background: rgba(7, 19, 50, 0.5);
                  padding: 8px 10px;
                  border-radius: 6px;
                  text-align: center;
                  display: flex;
                  flex-direction: column;
                  
                  .metric-label {
                    color: #75deef;
                    font-size: 11px;
                    font-weight: bold;
                    margin-bottom: 2px;
                  }
                  
                  .metric-value {
                    color: #4ecdc4;
                    font-size: 13px;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
        
        .training-controls {
          background: rgba(7, 19, 50, 0.4);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          padding: 20px;
          height: 380px; /* 匹配左侧高度 */
          display: flex;
          flex-direction: column;
          
          h3 {
            color: #75deef;
            font-size: 18px;
            margin-bottom: 15px;
          }
          
          .control-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .progress-info {
              margin-bottom: 20px;
              
              .training-status {
                margin-bottom: 15px;
                
                .status-indicator {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  padding: 12px 16px;
                  background: rgba(255, 193, 7, 0.1);
                  border: 1px solid rgba(255, 193, 7, 0.3);
                  border-radius: 8px;
                  animation: pulse 2s infinite;
                  
                  .loading-icon {
                    color: #ffc107;
                    animation: spin 1s linear infinite;
                  }
                  
                  .status-text {
                    color: #ffc107;
                    font-size: 16px;
                    font-weight: bold;
                  }
                }
              }
              
              .progress-bar {
                width: 100%;
                height: 8px;
                background: rgba(7, 19, 50, 0.5);
                border-radius: 4px;
                overflow: hidden;
                margin-bottom: 10px;
                
                .progress-fill {
                  height: 100%;
                  background: linear-gradient(90deg, #75deef, #4ecdc4);
                  border-radius: 4px;
                  transition: width 0.3s ease;
                  animation: progress-glow 2s infinite;
                }
              }
              
              .progress-text {
                display: flex;
                justify-content: space-between;
                
                span {
                  color: #999;
                  font-size: 12px;
                }
              }
              
              .progress-summary {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 8px;
                padding: 8px 12px;
                background: rgba(117, 222, 239, 0.1);
                border: 1px solid rgba(117, 222, 239, 0.3);
                border-radius: 6px;
                font-size: 14px;
                font-weight: bold;
                color: #75deef;
                
                span {
                  color: #75deef;
                }
              }
              
              .training-details {
                margin-top: 12px;
                padding: 12px;
                background: rgba(7, 19, 50, 0.3);
                border: 1px solid rgba(26, 60, 88, 0.5);
                border-radius: 6px;
                
                .detail-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                  
                  .detail-label {
                    color: #999;
                    font-size: 12px;
                  }
                  
                  .detail-value {
                    color: #75deef;
                    font-size: 12px;
                    font-weight: bold;
                    
                    &.training {
                      color: #ffc107;
                      animation: pulse 1.5s infinite;
                    }
                  }
                }
              }
            }
            
            .control-buttons {
              display: flex;
              flex-direction: column;
              gap: 10px;
              
              button {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 12px 20px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.3s ease;
                
                &.train-all-btn {
                  background: rgba(117, 222, 239, 0.2);
                  color: #75deef;
                  border: 1px solid #75deef;
                  
                  &:hover:not(:disabled) {
                    background: rgba(117, 222, 239, 0.3);
                  }
                }
                
                &.stop-btn {
                  background: rgba(255, 107, 107, 0.2);
                  color: #ff6b6b;
                  border: 1px solid #ff6b6b;
                  
                  &:hover:not(:disabled) {
                    background: rgba(255, 107, 107, 0.3);
                  }
                }
                
                &.refresh-btn, &.export-btn {
                  background: rgba(78, 205, 196, 0.2);
                  color: #4ecdc4;
                  border: 1px solid #4ecdc4;
                  
                  &:hover:not(:disabled) {
                    background: rgba(78, 205, 196, 0.3);
                  }
                }
                
                &:disabled {
                  opacity: 0.6;
                  cursor: not-allowed;
                }
              }
            }
          }
        }
      }
      
      // 可视化面板
      .visualization-panel {
        background: rgba(7, 19, 50, 0.4);
        border: 1px solid #1a3c58;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        
        h3 {
          color: #75deef;
          font-size: 18px;
          margin-bottom: 15px;
        }
        
        .charts-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          
          .chart-item {
            h4 {
              color: #999;
              font-size: 14px;
              margin-bottom: 10px;
            }
            
            .chart {
              height: 200px;
              background: rgba(7, 19, 50, 0.3);
              border: 1px solid #1a3c58;
              border-radius: 6px;
            }
            
            .progress-container {
              .model-progress-list {
                margin-bottom: 20px;
                
                .model-progress-item {
                  margin-bottom: 15px;
                  
                  .model-progress-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 5px;
                    
                    .model-name {
                      color: #75deef;
                      font-size: 14px;
                      font-weight: bold;
                    }
                    
                    .progress-status {
                      font-size: 12px;
                      padding: 2px 8px;
                      border-radius: 10px;
                      
                      &.pending {
                        background: rgba(153, 153, 153, 0.2);
                        color: #999;
                      }
                      
                      &.training {
                        background: rgba(255, 193, 7, 0.2);
                        color: #ffc107;
                        animation: pulse 1.5s infinite;
                      }
                      
                      &.completed {
                        background: rgba(78, 205, 196, 0.2);
                        color: #4ecdc4;
                      }
                    }
                  }
                  
                  .model-progress-bar {
                    height: 6px;
                    background: rgba(7, 19, 50, 0.5);
                    border-radius: 3px;
                    overflow: hidden;
                    position: relative;
                    
                    .progress-fill {
                      height: 100%;
                      background: linear-gradient(90deg, #75deef, #4ecdc4);
                      border-radius: 3px;
                      transition: width 0.8s ease-out;
                      position: relative;
                      
                      &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                        animation: shimmer 2s infinite;
                      }
                    }
                  }
                }
              }
              
              .overall-progress {
                padding-top: 15px;
                border-top: 1px solid rgba(26, 60, 88, 0.5);
                
                .overall-progress-info {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;
                  
                  span {
                    color: #75deef;
                    font-size: 14px;
                    font-weight: bold;
                  }
                }
                
                .overall-progress-bar {
                  height: 10px;
                  background: rgba(7, 19, 50, 0.5);
                  border-radius: 5px;
                  overflow: hidden;
                  
                  .progress-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #ff6b6b, #75deef, #4ecdc4);
                    border-radius: 5px;
                    transition: width 0.5s ease;
                    box-shadow: 0 0 10px rgba(117, 222, 239, 0.5);
                  }
                }
                
                .progress-summary {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 8px;
                  padding: 6px 10px;
                  background: rgba(78, 205, 196, 0.1);
                  border: 1px solid rgba(78, 205, 196, 0.3);
                  border-radius: 4px;
                  font-size: 12px;
                  font-weight: bold;
                  color: #4ecdc4;
                  
                  span {
                    color: #4ecdc4;
                  }
                }
              }
            }
          }
        }
      }
      
      // 训练日志
      .training-log {
        h3 {
          color: #75deef;
          font-size: 18px;
          margin-bottom: 15px;
          
          .log-count {
            color: #999;
            font-size: 14px;
            font-weight: normal;
          }
        }
        
        .log-container {
          background: rgba(7, 19, 50, 0.4);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          padding: 15px;
          max-height: 300px;
          overflow-y: auto;
          
          .log-item {
            display: flex;
            gap: 10px;
            margin-bottom: 8px;
            padding: 5px 0;
            border-bottom: 1px solid rgba(26, 60, 88, 0.3);
            
            .log-time {
              color: #666;
              font-size: 12px;
              min-width: 80px;
            }
            
            .log-model {
              color: #75deef;
              font-size: 12px;
              font-weight: bold;
              min-width: 80px;
            }
            
            .log-message {
              color: #999;
              font-size: 14px;
              flex: 1;
            }
            
            &.success .log-message {
              color: #4ecdc4;
            }
            
            &.error .log-message {
              color: #ff6b6b;
            }
            
            &.info .log-message {
              color: #75deef;
            }
            
            &.warning .log-message {
              color: #ffc107;
            }
          }
          
          .log-empty {
            text-align: center;
            color: #666;
            font-style: italic;
            padding: 20px;
          }
        }
      }
    }
  }
}

// 动画
@keyframes electricFlowH {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes electricFlowV {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes progress-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(117, 222, 239, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(117, 222, 239, 0.8);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 增强的参数配置样式
.config-section {
  background: rgba(7, 19, 50, 0.4);
  border: 1px solid #1a3c58;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  
  h4 {
    margin: 0 0 15px 0;
    color: #75deef;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(135deg, #75deef, #42a5f5);
      border-radius: 2px;
    }
  }
  
  .config-item {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &:has(input[type="checkbox"]) {
      display: flex;
      align-items: center;
      gap: 8px;
      
      label {
        margin: 0;
        cursor: pointer;
      }
    }
  }
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: #75deef;
}

// 响应式设计
@media (max-width: 1200px) {
  .model-training-page {
    padding-top: 90px;
    
    .page-content .module-container {
      .training-panel {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      
      .visualization-panel .charts-container {
        grid-template-columns: 1fr;
      }
    }
  }
}

@media (max-width: 768px) {
  .model-training-page {
    padding: 15px;
    padding-top: 80px;
    
    .page-content .module-container {
      padding: 20px;
      
      .config-panel .config-grid-simplified {
        grid-template-columns: 1fr;
        
        .data-range-section {
          grid-column: 1;
        }
      }
      
      .training-panel {
        grid-template-columns: 1fr;
        
        .training-controls .control-section .control-buttons {
          flex-direction: column;
        }
      }
    }
  }
}
</style> </style> 
